import React, { useMemo } from 'react';
import { useQuery, gql } from '@apollo/client';
import { Space, Table, TableProps,Button } from 'antd';

const AccountListGql = gql`
  query AccountList { # 定义查询方法(浏览器上显示的)
    accountList { # 定义与后端对接的方法名
      id
      username
      password
    }
  }
`;

export const Page1 = () => {
  const { loading, error, data } = useQuery(AccountListGql);
  const accountList = useMemo(() => {
      return data?.accountList || []
  }, [data])
  const columns: TableProps<any>['columns'] = [
     {
         title: 'ID',
         dataIndex: 'id'
     },{
         title: '用户名',
         dataIndex: 'username'
     },
     {
        title: '密码',
        dataIndex: 'password'
    }
  ]
  console.log(data)
  return <Table rowKey='id' loading={loading} dataSource={accountList} columns={columns}>
  </Table>
}